<template>
  <div class="cls1" ref="chartSC"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import request from '../axios/request'
const chartSC = ref()

function chartsInit(data) {
  var x = [];
  var d1 = [];

  for (var i = 0; i < data.length; i++) {
      d1.push(data[i].total_demand);
      x.push(data[i].code);
  }

  var myChart = echarts.init(chartSC.value, 'Light');
  var option = {
    grid: {
            left: '10%',
            right: '10%',
            bottom: '20%',
            top: '10%',
            containLabel: true,
            width: '80%', /* 增大grid的width属性值，可根据实际情况调整占比 */
            height: '70%' /* 增大grid的height属性值，可根据实际情况调整占比 */
        },
      xAxis: {
          type: 'category',
          data: x // 使用从接口获取到的数据中的名称作为x轴类目数据
      },
      yAxis: {
          type: 'value'
      },
      series: [
          {
              data: d1, // 使用从接口获取到的数据中的需求量作为柱状图柱子的数据
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                  color: 'rgba(180, 180, 180, 0.2)'
              }
          }
      ],
      title: {
  text: '不同产品销售大类需求量柱状图',
  textStyle: {
    color: '#90E2FF',
    fontSize: 16,
    textAlign: 'center'
  },
  left: 'center',
  bottom: '5%'
},
  };

  option && myChart.setOption(option);
}

// 组件挂载成功
onMounted(function () {
  // 发起axios异步请求，获取数据
  request({
      url: '/produce-api/queryAllcodenum',
      method: 'get'
  }).then(res => {
      chartsInit(res.data.data)
  }).catch((error) =>
      console.log(error))
})
</script>

<style scoped>
.cls1 {
  width: 100%;
  height: 100%;
}
</style>